/**
  *@ClassName ContinueLogin
  *@Description TODO
  *@Author wangming
  *@Date 2020-04-13 17:49
  *@Version 1.0
**/

<template>
  <div>
    <a-modal title="登录以继续使用" :visible="visible" width="30%" :footer="null" destroyOnClose :closable="false">
      <a-form :form="form" @submit="handleSubmit">
        <a-form-item>
          <a-input
            v-decorator="[
              'username',
              {
                rules: [{ required: true, message: '请输入用户名!' }]
              }
            ]"
            size="large"
          >
            <a-icon slot="prefix" type="user" class="prefixIcon"/>
          </a-input>
        </a-form-item>
        <a-form-item>
          <a-input
            v-decorator="[
              'password',
              {
                rules: [{ required: true, message: '请输入密码!' }]
              }
            ]"
            size="large"
            type="password"
          >
            <a-icon slot="prefix" type="lock" class="prefixIcon"/>
          </a-input>
        </a-form-item>
        <a-form-item>
          <a-row>
            <a-col :span="12" style="padding-right: 5px">
              <a-button
                style="width: 100%"
                size="large"
                type="primary"
                ghost
                @click="backLogin"
              >
                返回登录页面
              </a-button>
            </a-col>
            <a-col :span="12" style="padding-left: 5px">
              <a-button
                style="width: 100%"
                size="large"
                class="submit"
                type="primary"
                @click="handleSubmit"
                :loading="loginLoading"
              >
                确认登录
              </a-button>
            </a-col>
          </a-row>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
  import VueCookies from "vue-cookies";
  import store from "../../store";
  import {httpPost,OA_LOGIN} from "../../api/api";
  import {mapActions, mapState} from "vuex";

  export default {
    name: "continue-login",
    props:{
      visible:{
        type: Boolean,
        default: false
      }
    },
    computed: {
      ...mapState({
        loginLoading : state => state.loading[OA_LOGIN]
      })
    },
    data() {
      return {
        form: this.$form.createForm(this),
      }
    },
    components:{

    },
    methods:{
      ...mapActions("userStore", ["setUserInfo"]),
      handleSubmit(){
        this.form.validateFields((err, values) => {
          if (!err) {
            httpPost(OA_LOGIN, values).then(res => {
              //设置cookie
              this.setCookie(res);
              //设置上下文
              res.continueFlag = false;
              this.setUserInfo(res);
              //登陆成功
            });
          }
        });
      },
      backLogin(){
        VueCookies.remove("userInfo");
        //重新刷新页面，将vuex中的数据清空
        window.location.reload();
        this.$router.push('/login');
      },
      setCookie(data) {
        this.$cookies.set("userInfo", JSON.stringify(data));
      },
      setLogin(){
        let userInfo = VueCookies.get("userInfo");
        userInfo.continueFlag = false;
        this.setUserInfo(userInfo)
      }
    }
  }
</script>

<style scoped lang="less">
  @import "~ant-design-vue/lib/style/themes/default.less";

  .main {
    padding-top: 20px;
    width: 388px;
    margin: 0 auto;
    text-align: left;
    @media screen and (max-width: @screen-sm) {
      width: 95%;
    }
    .icon {
      margin-left: 16px;
      color: rgba(0, 0, 0, 0.2);
      font-size: 24px;
      vertical-align: middle;
      cursor: pointer;
      transition: color 0.3s;

      &:hover {
        color: @primary-color;
      }
    }

    .other {
      margin-top: 24px;
      line-height: 22px;
      text-align: left;

      .register {
        float: right;
      }
    }
    .login {
      /deep/ .ant-tabs .ant-tabs-bar {
        margin-bottom: 24px;
        text-align: center;
        border-bottom: 0;
      }

      /deep/ .ant-form-item {
        margin: 0 2px 24px;
      }

      .getCaptcha {
        display: block;
        width: 100%;
      }

      .icon {
        margin-left: 16px;
        color: rgba(0, 0, 0, 0.2);
        font-size: 24px;
        vertical-align: middle;
        cursor: pointer;
        transition: color 0.3s;
        &:hover {
          color: @primary-color;
        }
      }

      .other {
        margin-top: 24px;
        line-height: 22px;
        text-align: left;
        .register {
          float: right;
        }
      }

      .prefixIcon {
        color: @disabled-color;
        font-size: @font-size-base;
      }

      .submit {
        width: 100%;
        margin-top: 24px;
      }
    }
  }
</style>
